<script setup lang="ts">
import { reactive } from 'vue'
import { Form } from 'ant-design-vue'
import type { RuleObject } from 'ant-design-vue/es/form';
import { handleForm } from '@/utils/alert'
import { emptyFilter } from '@/utils/common'

type ComEmits = {
  submit: [params: PaginateQuery<IOrder>];
  button: [key: 'print' | 'confirm_ship']
}

const emit = defineEmits<ComEmits>()

const formState = reactive<PaginateQuery<IOrder & any>>({
  order_num: '',
  order_status: -1,
  shop_name: ''
})
const formRules = reactive<PartialRecord<IOrder & any, RuleObject[]>>({
  order_num: [],
  order_status: [],
  shop_name: []
})
const { validate, validateInfos, resetFields } = Form.useForm(formState, formRules)

const onSubmit = async () => {
  const res = await validate().catch(handleForm)
  if (res) {
    emit('submit', emptyFilter(res, [-1]))
  }
}
const onReset = () => {
  resetFields()
}


defineExpose<{
  setFields: {
    (key: string, value: any): void
  }
  getValues: {
    (): typeof formState
  }
  reset: {
    (): void
  }
}>({
  setFields: (key: string, value: any) => {
    formState[key] = value
  },
  getValues: () => emptyFilter(formState, [-1]),
  reset: () => resetFields()
})

</script>


<template>
  <AForm layout="inline" autocomplete="off" :model="formState" class="space-y-2" @finish="onSubmit">
    <AFormItem label="店铺名称" v-bind="validateInfos.shop_name" class="mt-2">
      <AInput v-model:value="formState.shop_name"></AInput>
    </AFormItem>

    <AFormItem label="订单号" v-bind="validateInfos.order_num">
      <AInput v-model:value="formState.order_num"></AInput>
    </AFormItem>

    <!--<AFormItem label="订单状态" v-bind="validateInfos.order_status">-->
    <!--  <ASelect v-model:value="formState.order_status">-->
    <!--    <ASelectOption :value="-1">全部</ASelectOption>-->
    <!--    <ASelectOption :value="105">已支付</ASelectOption>-->
    <!--    <ASelectOption :value="2">备货中</ASelectOption>-->
    <!--    <ASelectOption :value="3">已发货</ASelectOption>-->
    <!--    <ASelectOption :value="5">已完成</ASelectOption>-->
    <!--  </ASelect>-->
    <!--</AFormItem>-->

    <div class="flex justify-end w-full space-x-2 py-2">
      <AButton type="primary" @click="emit('button', 'print')">打印勾选订单</AButton>

      <APopconfirm title="是否确认已勾选订单发货" @confirm="emit('button', 'confirm_ship')">
        <AButton type="primary">批量确认发货</AButton>
      </APopconfirm>

      <AButton type="primary" html-type="submit">搜索</AButton>
      <AButton @click="onReset" danger>重置</AButton>
    </div>
  </AForm>
</template>